<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <img src="../../assets/logo.png" alt />
        <el-button type="info" round @click="loginOut">退出</el-button>
      </el-header>
      <el-container>
        <!-- 侧边导航栏 -->
        <el-aside width="202px">
          <el-col>
            <el-menu
              default-active="2"
              router
              class="el-menu-vertical-demo"
              background-color="#545c64"
              @open="handleOpen"
              @close="handleClose"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-submenu index="item.id" v-for="item of asideMenu" :key="item.id">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{item.authName}}</span>
                </template>
                  <el-menu-item
                    index="'/'+item.path"
                    v-for="item1 of item.children"
                    :key="item1.id"
                    id="MenuChild"
                  >
                    <i class="el-icon-location"></i>
                    <span>{{item1.authName}}</span>
                  </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <!-- 主题内容 -->
        <el-main>
          <!-- 根据不同的路由展示不同的内容 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      asideMenu: []
    };
  },
  computed: {},
  created() {
    this.getAsideData();
  },
  mounted() {},
  watch: {},
  methods: {
    loginOut() {
      window.sessionStorage.clear("token");
      this.$router.push("/login");
    },
    async getAsideData() {
      let { data: res } = await this.$axios.get("menus");
      // console.log(res)
      if (!res.meta.status) return this.$message.error("获取失败");
      this.asideMenu = res.data;
      // console.log(this.asideMenu);
    },
    handleOpen() {},
    handleClose() {}
  },
  components: {}
};
</script >

<style scoped lang='less'>
.el-container {
  .el-header {
    background-color: #333;
    height: 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    // img {
    // }
    // button {
    // }

  }
  .el-submenu .el-menu-item /deep/ {
    text-align: center;
  }
}
</style>
            